<script setup lang="tsx">
import CommonTable from "@/components/common-table/index.vue";
import { ElTree } from "element-plus";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { getAllMenus } from "./service";

const treeRef = ref<InstanceType<typeof ElTree>>()

const treeList = reactive<any[]>([]);

const checkedKeys = ref<any[]>([]);

const checkedPerms = ref<{ [key: string]: number[] }>({});

// https://blog.csdn.net/Perback/article/details/135204813 【Vue3干货】template setup 和 tsx 的混合开发实践
const Operate = defineComponent({
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { data: row } = props;
        return () => {

            function editMenu(row: Record<string, any>) {
                throw new Error("Function not implemented.");
            }

            function deleteMenu(row: Record<string, any>) {
                throw new Error("Function not implemented.");
            }

            return <div class="operate_tags" >
                <el-button type="primary" plain size="small" onClick={() => editMenu(row)}>编辑</el-button>
                <el-button type="danger" size="small" onClick={() => deleteMenu(row)}>删除</el-button>
            </div >
        }
    }
});

const SLOT_ITEMS = [{
    name: "Operate",
    component: Operate
}]

const dataSource = reactive<any>({
    columns: [
        {
            label: "ID",
            prop: "id",
        },
        {
            label: "菜单名称",
            prop: "name",
        },
        {
            label: "访问路径",
            prop: "url",
            width: 400
        },
        {
            label: "菜单图标",
            prop: "icon",
        },
        {
            label: "操作",
            slot: "Operate",
            component: Operate,
            width: 220
        }
    ],
    data: [],
});

const onHandleCheck = () => {
    checkedKeys.value = treeRef.value!.getCheckedKeys(false)
};

onMounted(() => {
    getAllMenus().then(res => {
        dataSource.data = res.data;
    })
})

const getCheckedKeys = () => {
    console.log(treeRef.value!.getCheckedKeys(false))
    console.log(checkedPerms.value);
}

const groupChange = (id: number, value: number[]) => {
    checkedPerms.value[id] = value;
}

const defaultProps = {
    children: "children",
    label: "label",
}
</script>

<template>
    <!-- <el-tree ref="treeRef" :data="treeList" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
        :default-checked-keys="[3]" :props="defaultProps" @check="onHandleCheck">
        <template #default="{ node, data }">
            <div class="custom-tree-node">
                <div class="tree-node-label">{{ node.label }}</div>
                <div v-if="!!data.hasPerms && checkedKeys.includes(data.id)" class="tree-node-perm">
                    <el-checkbox-group v-model="checkedPerms[`${data.id}`]" @change="groupChange(data.id, $event)">
                        <el-checkbox v-for="perm in data.perms" :key="perm.id" :label="perm.permission">{{ perm.name
                            }}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
        </template>
</el-tree>
<el-button @click="getCheckedKeys">获取选中节点</el-button> -->
    <common-table ref="tableRef" :data-source="dataSource" rowKey="id">
        <template v-for="(item, index) in SLOT_ITEMS" #[item.name]="{ row }" :key="index">
            <component :is="item.component" :data="row"></component>
        </template>
    </common-table>
</template>

<style scoped lang="scss">
.custom-tree-node {
    ::v-deep .tree-node-label {
        line-height: 32px;
        margin-right: 60px;
    }

    width: 100%;
    height: 32px;
    display: flex;
}
</style>
